<template>
	<view class="container">
		<view class="cu-card case">
			<view class="cu-item shadow">
				<view class="bg-gradual-orange">
					<view class="padding"></view>
					<view class="text-center">
						<view class="action">转账金额</view>
					</view>
					<view class="text-center">
						<text class="rechargeCoin">￥{{ banks.amount }}</text>
					</view>
					<view class="padding"></view>
				</view>
				<view class="cu-list menu margin-top-lg">
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">充值单号</text>
						</view>
						<view class="action">
							<text class="padding-lr">{{ orderid }}</text>
							<text class="cuIcon-copy text-gray" @click="copy(orderid)"></text>
						</view>
					</view>
<!-- 					<view class="cu-item">
						<view class="content">
							<text class="text-grey">区块网络</text>
						</view>
						<view class="action">
							<text class="padding-lr">TRC20</text>
							
						</view>
					</view> -->
					<view class="">
						<view class="image-container">
						<image style="width: 500rpx;height: 500rpx;" :src="usdtqrimg"></image>
						</view>
					</view>

<!-- 					<view class="cu-item">
						<view class="content">
							<text class="text-grey">收款地址</text>
						</view>
						<view class="action">
							<text style="font-size: 12px;">{{ banks.usdt_address }}</text>
							<text class="cuIcon-copy text-gray" @click="copy(banks.usdt_address)"></text>
						</view>
					</view> -->
					<view class="cu-item" style="min-height:120rpx;">
						<view class="content">
							<text class="text-grey">上传支付凭证</text>
						</view>
						<view class="">
							<image style="width: 200rpx;height: 100rpx;" @tap="uploadTap()" :src="pingzheng"></image>
						</view>
					</view>
				</view>

					<view class="padding-lr flex flex-direction">
						<button :disabled="disableSubmit" class="cu-btn bg-red margin-tb-sm lg" @click="beginSubmit()">提交</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import h5Copy from '@/common/h5-copy.js'
	export default {
		data() {
			return {
				loaded: !1,
				loading: !1,
				disableSubmit: !1,
				uname: "",
				orderid: "",
				banks: {},
				showInput: !1,
				qrimg:"",
				pingzheng:"/static/plus.png",
				pingzheng_url:""
				
			}
		},
		onLoad: function (option) {
			this.orderid = option.orderid;
			this.helper.checkLogin();
			this.loadData();
		},
		computed:{
			usdtqrimg() {
				//console.log(this.weburl + this.banks.img)
				return this.weburl + this.qrimg;
			},
		},		
		methods: {
			loadData: function() {
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['orderid='+this.orderid,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getPaymentInfo",
					timestamp:timestamp,
					data:{orderid:this.orderid,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.banks = res.data.data.banks;
					this.qrimg = res.data.data.banks.account;
					//console.log(this.qrimg)
				})
			},
			inputChange: function(e) {
				var n = e.currentTarget.dataset.key;
				this[n] = e.detail.value,
				this.disableSubmit = "" == e.detail.value
			},
			
			uploadTap:function(){
				let that = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
						that.uploadFiles(res.tempFilePaths[0]);
					}
				});
			},
			//上传图片
			async uploadFiles(image){		
				uni.showLoading({
					title: '请稍后..',
					mask: true,
				})
			
				const uploadUrl = await this.uploadImage(image);
				
				setTimeout(() => {
					uni.hideLoading();
				}, 300);
				
				if(uploadUrl){
					this.pingzheng = this.weburl + uploadUrl.url;
					this.pingzheng_url = uploadUrl.url;
					uni.showToast({
						title: '上传成功',
						icon: 'success',
						mask: true,
						duration: 2000
					});
				}else{
					//上传失败处理
					uni.showToast({
						title: '上传中出现问题，已终止上传',
						icon: 'none',
						mask: true,
						duration: 2000
					});
				}
			
			},
			uploadImage: function(file){
				return new Promise((resolve, reject)=> {
					var info = uni.getStorageSync("userinfo");
					let timestamp = this.helper.now();
					
					//发送给后端的附加参数
					const formData = {
						token:info.token
					};
			
					let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
					//console.log('地址是',this.helper)
					this.uploadTask = uni.uploadFile({
						url: this.helper.getWebsiteUrl() +"uploadimg?timestamp=" + timestamp, 
						filePath: file,
						name: 'file',
						formData: formData,
						header:{"sign":sign},
						success(uploadFileResult){
							const uploadFileRes = JSON.parse(uploadFileResult.data) || {};
							if(uploadFileRes.errorcode === 0 && uploadFileRes.data){
								resolve(uploadFileRes.data);
							}else{
								reject('接口返回错误');
							}
							
						}, 
						fail(){
							
						}
					});
				});
			},
			
			
			beginSubmit: function() {
				this.disableSubmit = !0;

				if(this.pingzheng_url == ''){
					uni.showToast({
						title:"请上传充值凭证",
						icon:"none"
					})
					this.disableSubmit = !1;
					return;
				}				
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['usdt='+this.banks.amount,'orderid='+this.orderid,'token='+info.token,'timestamp='+timestamp, 'pic='+this.pingzheng_url]);
				this.helper.req({
					api:"confirmUSDTTransfer",
					timestamp:timestamp,
					data:{usdt:this.banks.amount,orderid:this.orderid,token:info.token,pic:this.pingzheng_url},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					uni.showModal({
						title: "提示",
						content: res.data.message,
						showCancel:false,
						confirmText: "确定",
						success:function(res){
								uni.navigateTo({
									url: '/pages/wallet/rechargelog'
								})
						}
					})
				})
			},
			copy: function(val) {
				const result = h5Copy(val)
				if (result === false) {
					uni.showToast({
						title:'不支持',
					})
				} else {
					uni.showToast({
						title:'复制成功',
						icon:'none'
					})
				}
				// uni.setClipboardData({
				// 	data: val,
				// 	success: function() {
				// 		uni.showToast({
				// 			title: '复制成功',
				// 			icon: "none",
				// 			duration: 1000
				// 		})
				// 	},
				// 	fail() {
				// 		uni.showToast({
				// 			title: '复制失败',
				// 			icon: "none",
				// 			duration: 1000
				// 		})
				// 	}
				// });
			}
		}
	}
</script>

<style lang="scss">
page{
width: 100%;
height: 100%;
overflow: hidden;
}
.success .cuIcon-roundcheck {
    font-size: 220upx;

}
.rechargeCoin {
    font-size: 64upx;
}
  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>